<template>
  <div id="openlayersContainer" ref="openlayersContainer"></div>


</template>

<script setup>
// import { View, Map, TileLayer, OSM, fromLonLat } from 'ol';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile.js'
import Map from 'ol/Map.js'
import XYZ from 'ol/source/XYZ.js'
import 'ol/ol.css'


import { onMounted, ref } from 'vue'
let token = 'ee20013ff03e7d98b23e1251bc0b7cea';

onMounted(async () => {
  // 天地图信息
  const map = new Map({
    target: 'openlayersContainer',
    view,
    layers: [
      tdtLayer,tdtnameLayer
    ],
  });
  console.log(Map)
})
const view = new View({
  center: [114.3165, 30.5264],
  zoom: 11,
  maxZoom: 18,
  minZoom: 5,
  projection: 'EPSG:4326'
})
const tdtSourse = new XYZ({
  url: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + token,
})
const tdtLayer = new TileLayer({
  source: tdtSourse
})

const tdtnameSourse = new XYZ({
  url:  'http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + token,
})
const tdtnameLayer = new TileLayer({
  source: tdtnameSourse
})

</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#openlayersContainer {
  width: 100vw;
  height: 100vh;

}

.button-container {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
}
</style>
